<script setup lang="ts">
import Picker from '@/components/Picker.vue';
import type { PickerFieldNames } from 'vant';
import useStore from '@/store';
import { reactive } from 'vue';
import background from '@/assets/images/background.jpg'
import { showToast } from 'vant';

const { partnerLists } = useStore();
const data = reactive({
  showAreaPicker: false,
  partnerList:partnerLists.partnerListsMobile, // 合伙人列表
  pickerText: '微信号', // 下拉选中的值，默认查询微信号
  pickerValue: 'wechat', // 下拉选中的值，默认查询微信号
  input: '' , // 输入框的值
  isEnd: false, // 按钮的loading
  placeholder: '输入需要查询的微信号'
})
const onPickerConfirm = (res: PickerFieldNames[]) => {
  data.pickerText = res[0].text as string;
  data.pickerValue = res[0].value as string;

  if (data.pickerValue === 'wechat') {
    data.placeholder = '输入需要查询的微信号';
  } else {
    data.placeholder = '输入需要查询的小红书账号';
  }
  console.log(data.pickerText,data.pickerValue);
}

// 查询逻辑
const findEvent = () => {
  data.isEnd = true; // 一点击就loading
  let isMartek = false;
  const inputValue = data.input;
  console.log(!inputValue);
  if (!inputValue || inputValue.trim() === '') {
    showToast({
        message: '输入框不能为空！',
        position: 'top',
        type: 'fail',
        forbidClick: true,
    });
    data.isEnd = false;
    data.input = '';
    return;
  }
  data.partnerList.map(item => {
    if (item.value === data.pickerValue) {
      for (let i = 0; i < item.list.length; i++) {
        if (item.list[i].account === inputValue) {
            showToast({
                message: '合伙人名字是' + item.list[i].username,
                position: 'top',
                type: 'success',
                forbidClick: true,
            });
            data.isEnd = false;
            isMartek = false;
            return;
        } else {
            isMartek = true;
        }

      }
    }
  })

  if (isMartek) {
    showToast({
        message: '该账号不是合伙人！',
        position: 'top',
        type: 'fail',
        forbidClick: true,
    });
    data.isEnd = false;
    return;
  }
}

</script>


<template>
    <div class="container">
        <div class="content">
            <!-- 图片 -->
            <div>
                <!-- <img src="../../assets/images/background.jpg" alt=""> -->
                <van-image fit="contain" width="18rem" height="18rem" :src="background" />
            </div>
            <!-- 标题 -->
            <div class="title">
                <span>合伙人防伪查询系统</span>
            </div>
            <!-- 输入框 -->
            <div class="flex">
                <van-field v-model="data.pickerText" is-link readonly name="picker" @click="data.showAreaPicker = true" class="input" style="width:35%"/>
                <van-field v-model="data.input"  :placeholder="data.placeholder" class="input" clearable  style="width:65%;margin-left: 5px;"/>
            </div>

            <div class="btn">
                <van-button type="primary" size="normal" @click="findEvent" :loading="data.isEnd" class="van-button">查询</van-button>
            </div>
        </div>
    </div>
    
    <Picker
        title="标题"
        show-toolbar
        v-model:show="data.showAreaPicker"
        :range="data.partnerList"
        @confirm="onPickerConfirm"
        />
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: white;
  font-size: 24px;
  display: flex;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.title {
  margin-bottom: 2rem;
  background-color: red;
  display: block;
  height: 1.8rem;
  width: 10rem;
  text-align: center;
  line-height: 1.8rem;
  font-size: .9rem;

  span {
    color: white;

  }
}

.flex {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-between;

  // 修改组件样式:deep () 
  :deep(.input){
    border: 1px solid #ccc;
    border-radius: 4px;
    // margin-right: 3px;
  }
}

.btn{
    display: flex;
    width: 85%;
    justify-content: center;
    margin-top: 5px;

    :deep(.van-button){
        width: 100%;
    }
}
</style>